<template>
    <div style="padding:30px;">
        <el-alert :closable="false" title="">
            <transition name="fade-transform" mode="out-in">
                <template>
                    <div>
                        <EditButton @add="onAdd" @refresh="onRefresh" :listData="getList" :filterFieldName="getFields"
                            @search="onSearch"></EditButton>
                        <el-table v-loading="listLoading" :data="list" :height="iHeight" style="width: 100%">
                            <!-- <el-table-column prop="workId" label="ID">
                            </el-table-column> -->
                            <el-table-column prop="workName" label="工作台名称">
                            </el-table-column>
                            <el-table-column prop="location" label="位置信息">
                            </el-table-column>
                            <el-table-column prop="pcIp" label="绑定IP">
                            </el-table-column>
                            <el-table-column prop="roomId" label="绑定诊室ID">
                            </el-table-column>
                            <el-table-column prop="staffId" label="绑定医生ID">
                            </el-table-column>
                            <el-table-column fixed="right" label="操作" width="150">
                                <template slot-scope="scope">
                                    <EditTableButton @click-button="handleClick" :data="scope.row"></EditTableButton>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper" :total="totalSize">
                        </el-pagination>
                        <!-- <edit-form @sendUpdate="update" ref="editForm"></edit-form> -->
                        <edit-multiplay-form :filterName="'staffName'" @sendUpdate="update" ref="editForm">
                        </edit-multiplay-form>
                    </div>
                </template>
            </transition>
        </el-alert>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import EditForm from "@/views/common/edit-form.vue"
import { FormDataUtils, IFormCommonMultData, TouchType } from '@/views/common/data/ICommon';
import EditTableButton from "@/views/common/edit-table-button.vue"
import EditButton from "@/views/common/edit-button.vue"
import { IWorkbenchModel } from '@/api/types';
import { WorkbenchModule } from '@/store/modules/workbench';
import EditMultiplayForm from '@/views/common/edit-multiplay-form.vue';
import { RoomsModule } from '@/store/modules/room';
import { DoctorsModule } from '@/store/modules/doctor';

@Component({
    name: 'Room',
    components: {
        EditForm,
        EditTableButton,
        EditButton,
        EditMultiplayForm
    }
})
export default class extends Vue {
    public allList: Array<IWorkbenchModel> = []
    public list: Array<IWorkbenchModel> = []
    public listLoading: boolean = false
    scope: any;
    $refs: any;
    public optType: string = ""
    public iHeight = window.innerHeight - 300;
    public currentPage: number = 1;
    public pageSize: number = 10;
    public totalSize: number = 0;
    public setShowList() {
        let startIndex = this.pageSize * (this.currentPage - 1);
        this.list = this.allList.filter((value, index) => {
            return index >= startIndex && index < startIndex + this.pageSize;
        });
    }


    created() {
        this.init()
    }
    public getList() {
        return this.allList;
    }
    public getFields() {
        return "workName,locationId,roomId,staffId,pcIp,pcCode"
    }
    //操作相关处理
    public async handleClick(type: TouchType, row: any) {
        if (type === TouchType.DELETE) {
            WorkbenchModule.deleteWorkbench(row.workId).then(v => {
                if (v) {
                    this.list = this.list.filter(value => {
                        return value.workId != row.workId
                    })
                }
            });
            return;
        }
        this.optType = type;
        if (type === TouchType.SEE || type === TouchType.EDIT) {
            let keys = Object.keys(row)
            let data: Array<IFormCommonMultData> = await FormDataUtils.getFormsMultiplay(row, "workbench", (key: string) => {
                return this.$t(key);
            }, type === TouchType.SEE ? keys : ['workId'], ["status", 'workId', "updateTime"], [{
                filed: "roomId", key: "roomId", value: "roomName", isMultiplay: false, getSelectFunc: async () => {
                    return RoomsModule.getRooms()
                }
            }, {
                filed: "staffId",
                key: "staffId",
                value: "staffName",
                getSelectFunc: async () => {
                    return DoctorsModule.getDoctors()
                }
            }])
            console.error("数据:", data)
            this.$refs.editForm.showForm(data, type === TouchType.EDIT)
        } else if (type === TouchType.ADD) {
            let mod: IWorkbenchModel = {
                workId: 0,
                workName: "",
                location: "",
                locationId: "",
                pcCode: "",
                pcIp: "",
                status: "",
                staffId: "",
                roomId: "",
                updateTime: "",
            }
            let data1: Array<IFormCommonMultData> = await FormDataUtils.getFormsMultiplay(mod, "workbench", (key: string) => {
                return this.$t(key);
            }, [], ["status", 'workId', "updateTime"], [{
                filed: "roomId", key: "roomId", value: "roomName", isMultiplay: false, getSelectFunc: async () => {
                    return RoomsModule.getRooms()
                }
            }, {
                filed: "staffId",
                key: "staffId",
                value: "staffName",
                getSelectFunc: async () => {
                    return DoctorsModule.getDoctors()
                }
            }])
            // let data = FormDataUtils.getForms(mod, "workbench", (key: string) => {
            //     return this.$t(key);
            // }, [], ["status", "updateTime", "workId"])
            this.$refs.editForm.showForm(data1, true)
        }
    }

    //更新成功
    public update(obj: any) {
        console.error("Update:", obj, this.optType);
        WorkbenchModule.updateWorkbench(obj).then(v => {
            console.error(v)
            if (v === 1) {//成功了
                if (!obj.workId && v) {
                    obj.workId = v;
                    this.list.push(obj);
                } else {
                    for (let i = 0; i < this.list.length; i++) {
                        if (this.list[i].workId === obj.workId) {
                            this.list[i].workName = obj.workName;
                            this.list[i].pcCode = obj.pcCode;
                            this.list[i].pcIp = obj.pcIp;
                            this.list[i].status = obj.status;
                            this.list[i].staffId = obj.staffId;
                            this.list[i].roomId = obj.roomId;
                            this.list[i].location = obj.location;
                            this.list[i].locationId = obj.locationId;
                            break;
                        }
                    }
                }
            } else if (!obj.workId && v) {
                obj.workId = v;
                this.list.push(obj);
            }
        }).catch(ex => {
            console.error(ex);
        })
    }

    public onAdd() {
        this.handleClick(TouchType.ADD, null);
    }

    public onRefresh() {
        console.error("onClick onRefresh");
    }

    public onSearch(val: any) {
        console.error("onClick onSearch");
        this.list = val
    }

    public async init() {
        this.list = [];
        this.listLoading = true
        let result: any = await WorkbenchModule.getWorkbenchs()
        this.list = result
        this.allList = result
        this.totalSize = this.allList.length;
        this.setShowList();
        setTimeout(() => {
            this.listLoading = false
        }, 0.5 * 1000)
    }

    public handleSizeChange(val: number) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.setShowList();
    }
    public handleCurrentChange(val: number) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
        this.setShowList();
    }
}
</script>